<template>
    <fieldset>
        <legend>侦听器</legend>
        <input type="text" v-model="val">
        <h1>{{props.testVal}}</h1>
        <button>点击</button>
    </fieldset>
</template>
<script setup>
import {watch,ref,defineProps,toRefs} from "vue"
    // watch

    // 侦听响应式变量
    let val = ref("")

    watch(val,(newVal,oldVal)=>{
        console.log("new-----",newVal);
        console.log('old-----',oldVal);
        
    })
    // 侦听props
    let props = defineProps(['testVal','testVal2'])

    // console.log(props);
    
    // 1.侦听整个props
    // watch(props,(newVal,oldVal)=>{
    //     console.log('newProp',newVal);
    //     console.log('oldProp',oldVal);
    // })
    // 侦听多个数据


    // 2.侦听单个prop的变化
    // watch(()=>props.testVal,(newVal)=>{
    //     console.log('newVal',newVal); 
    // })

    // 3.解构的props也可以侦听
    // let {testVal2} = toRefs(props)
    // watch(testVal2,(newVal)=>{
    //     console.log('newTestVal2------',newVal);
    // })

    // 侦听多个数据
    watch([()=>props.testVal,()=>props.testVal2],(newVal)=>
    {
        console.log('--------',newVal);
    })
</script>